<template>
  <div ref="element" class="chart"></div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import useEchart from "../hooks/useEchart.js";

const element = ref()
const {renderEchart} = useEchart()

onMounted(() => {
  const colors = [
    "#00ADD0",
    "#FFA12F",
    "#B62AFF",
    "#604BFF",
    "#6E35FF",
    "#002AFF",
    "#20C0F4",
    "#95F300",
    "#04FDB8",
    "#AF5AFF"
  ]
  const getData = () => {
    let data = {
      name: "根节点1",
      value: 0,
      children: []
    };
    for (let i = 1; i <= 10; i++) {
      let obj = {
        name: "节点" + i,
        value: i,
        children: [],
      };
      for (let j = 1; j <= 5; j++) {
        let obj2 = {
          name: `节点1-${i}-${j}`,
          value: 1 + "-" + i + "-" + j,
        };
        if (j % 2 == 1) {
          obj2.children = []
          for (let k = 1; k <= 3; k++) {
            let obj3 = {
              name: `节点1-${i}-${j}-${k}`,
              value: 1 + "-" + i + "-" + j + '-' + k,
            };
            obj2.children.push(obj3);
          }
        }

        obj.children.push(obj2);
      }

      data.children.push(obj);
    }
    let arr = []
    arr.push(data)
    arr = handleData(arr, 0)
    return arr;
  }

  const handleData = (data, index, color = '#00f6ff') => {
    //index标识第几层
    return data.map((item, index2) => {
      //计算出颜色
      if (index == 1) {
        color = colors.find((item, eq) => eq == index2 % 10);
      }
      // 设置节点大小
      if (index === 0 || index === 1) {
        item.label = {
          position: "inside",
          //   rotate: 0,
          //   borderRadius: "50%",
        }
      }
      // 设置label大小
      switch (index) {
        case 0:
          item.symbolSize = 70
          break;
        case 1:
          item.symbolSize = 50
          break;
        default:
          item.symbolSize = 10
          break;
      }
      // 设置线条颜色
      item.lineStyle = {color: color}

      if (item.children) {//存在子节点
        item.itemStyle = {
          borderColor: color,
          color: color
        };
        item.children = handleData(item.children, index + 1, color)
      } else {//不存在
        item.itemStyle = {
          color: 'transparent',
          borderColor: color
        };
      }
      return item
    })
  }
  const option = {
    type: "tree",
    series: [
      {
        type: "tree",
        hoverAnimation: true, //hover样式
        data: getData(),
        top: '5%',
        bottom: '5%',
        left: 0,
        right: 0,
        layout: "radial",
        symbol: "circle",
        symbolSize: 10,
        nodePadding: 20,
        animationDurationUpdate: 750,
        expandAndCollapse: true, //子树折叠和展开的交互，默认打开
        initialTreeDepth: 2,
        focusNodeAdjacency: true,
        itemStyle: {
          borderWidth: 1,
        },
        label: { //标签样式
          color: "#fff",
          fontSize: 10,
          fontFamily: "SourceHanSansCN",
          position: "inside",
          rotate: 0,
        },
        lineStyle: {
          width: 1,
          curveness: 0.5,
        }
      }
    ]
  };
  renderEchart(element, option)
})
</script>

<style scoped>
.chart {
  height: 100%;
  width: 100%;
}
</style>